<template>
	<view class="container pbsafe_56">
		<view class="ptb_8 fc fc_zhured" style="background: #FFE9E9;" v-if="appType==base.USER_TYPE&&type=='payment'">
			{{payName}}：￥{{payAmount}}
		</view>
		<view class="p_12">
			<view class="p_12 br_8 bc_fff box" style="min-height: 640rpx;">
				添加{{type=='logistics'?'物流单':'支付凭证'}}，最多添加6张
				<view class="mt_16">
					<u-upload :multiple="true" maxCount="6" width="196" height="196" :fileList="uploadList"
						@afterRead="afterRead" @delete="deletePic" name="list1">
						<view class="fx fx_col aic jcc width_98 height_98 bo_1 boc_999 br_4 box"
							style="border-style: dashed;">
							<u-icon name="camera-fill" size="48rpx" color="#999999">
							</u-icon>
							<view class="fc_999 fz_12 mt_8">
								上传图片
							</view>
						</view>
					</u-upload>
				</view>
			</view>
		</view>
		<view class="pf b_0 l_0 r_0 plr_16 pbsafe_8 pt_8 bc_fff">
			<button class="custom_btn primary lh_40 w100 fz_14 br_40" :disabled="disableBtn"
				@click="handleUpload">确认上传</button>
		</view>
	</view>
</template>

<script>
	import uploadMixin from '@/mixins/upload.js'
	import {
		mapState
	} from 'vuex'
	import api from '@/service/config/api.js'
	export default {
		mixins: [uploadMixin],
		data() {
			return {
				base: this.$base,
				id: '',
				infoId: '',
				certificateType: '',
				type: '',
				payAmount: 0,
				payType: 1,
			};
		},
		onLoad(options) {
			this.id = options.id || ''
			this.infoId = options.infoId || ''
			this.certificateType = options.certificateType || ''
			this.type = options.type || ''
			this.payAmount = options.payAmount || 0
			this.payType = options.payType || 1
			this.setNavBar()
			if (!this.id&&!this.infoId) {
				this.$utils.showToast('订单不存在', 1500, 1)
			}
		},
		computed: {
			...mapState(['appType']),
			payName() {
				if (this.type == 'payment') {
					if (this.payType == 1) {
						return '待付金额'
					} else {
						if (this.certificateType == 1) {
							return '待付金额'
						} else {
							return '待付尾款'
						}
					}
				}
			}
		},
		methods: {
			// 设置标题
			setNavBar() {
				switch (this.type) {
					case 'payment':
						uni.setNavigationBarTitle({
							title: '上传凭证'
						})
						break
					case 'install':
						uni.setNavigationBarTitle({
							title: '确认安装'
						})
						break
					case 'logistics':
						uni.setNavigationBarTitle({
							title: '上传物流单'
						})
						break
					default:
						break
				}
			},
			handleUpload() {
				if (!this.uploadList.length) {
					return this.$utils.showToast('请上传图片')
				}
				this.$utils.loading()
				if (this.type == 'logistics') {
					api.post('/order/api/order/upldLogistics', {
						logisticsImageUrl: this.uploadList.filter(item => item.status == 'success' && item.url)
							.map(
								item => item.url).join(','),
						...this.infoId ? {
							orderInfoId: this.infoId
						} : {
							orderId: this.id
						}
					}).then(res => {
						this.$utils.showToast('上传成功', 1500, 1, '', 'success')
					})
				} else {
					api.post('/order/api/order/uploadCertificate', {
						certificateType: this.certificateType,
						...this.infoId ? {
							orderInfoId: this.infoId
						} : {
							orderId: this.id
						},
						certificateUrl: this.uploadList.filter(item => item.status == 'success' && item.url).map(
							item => item.url).join(',')
					}).then(res => {
						this.$utils.showToast('上传成功', 1500, 1, '', 'success')
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		/deep/.u-upload__wrap {
			display: grid !important;
			grid-template-columns: repeat(3, 196rpx);
			justify-content: space-between;
			grid-row-gap: 24rpx;
		}

		/deep/.u-upload__wrap__preview {
			margin: 0 !important;
		}
	}
</style>